import React,{useState} from 'react'
import './yiqi.css'
export default function Yiqipao() {
  const lists =[{id:1,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑1.png')},
  {id:2,text:'3月20日晚上7点半，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑2.png')},
  {id:3,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑1.png')},
  {id:4,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑2.png')},
  {id:5,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑1.png')},
  {id:6,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑2.png')},
  {id:7,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑1.png')},
  {id:8,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑2.png')},
  {id:9,text:'3月27日晚上8点，相约新疆工程学院东篮球场一起夜跑，2人即可成队',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/跑1.png')},
  ]

  const [flag,setflag]=useState(false)
  const [num,setnum]=useState(2)

    window.onscroll = () => {
  setflag(true)
   if(window.innerHeight + window.scrollY >=document.body.scrollHeight-1){
   const timer = setTimeout(()=>{
  setflag(false)
  setnum(num+2)
  clearInterval(timer)
  },1000)
  }}
  return (
    <div className='pao-nei'>
      {(lists.splice(0,num)).map(item=>{
        return <div key={item.id} className='pao-main'>
          <div className='pao-left'>
            <div className='pao-tu'><img src={item.tu}></img></div>
            <b>{item.text}</b>
            <dd style={{color:'lightgrey', float:'left', marginTop:'30px'}}>{item.name}</dd>
          </div>
        </div>
      })}
       <h3 style={{textAlign:'center'}}>{flag?'加载中...':'已到底'}</h3>
    </div>
  )
}
